<template>
  <el-dialog
  title="预览文章"
  :visible="preDialogIsShow"
  @close="btnCancel"
  width="60%">
  <div class="title">
    <h2>{{articleData.title}}</h2>
    <span style="margin-left:10px">{{ articleData.createTime | parseTimeByString }}</span>
    <span style="margin-left:10px">{{articleData.username}}</span>
    <i class="el-icon-view" style="margin-left:10px"></i>
    <span style="margin-left:10px">{{articleData.visits}}</span>
  </div>
  <div class="ql-container ql-snow content" style="background:#f5f5f5;margin-top:10px">
        <div class="ql-editor" v-html="articleData.articleBody"></div>
   </div>
</el-dialog>
</template>

<script>
// import editor from '@/components/QuillEditor'
export default {
  components: {
    // editor
  },
  props: {
    preDialogIsShow: {
      type: Boolean,
      default: false,
      require: true
    },
    articleData: {
      type: Object,
      require: true,
      default () {
        return {
        }
      }
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:preDialogIsShow', false)
    }
  }
}
</script>

<style scoped ></style>
